<template>
	<s-layout title="活动详情" navbar="custom1" :bgStyle="{color: '#F6F6F6'}" :onShareAppMessage="shareData">

			<su-swiper :height="425" :seizeHeight="425" imageMode="aspectFill" :circular="true"
				:list="state.data.images">
			</su-swiper>
			<view class="main ss-r-t-16 ss-flex-col ">
				<view class="title">{{state.data.name}}</view>
				
				<view class="rate_category ss-flex ss-row-between">
					<view class="rate ss-flex ss-row-left ss-m-t-16 ss-m-b-16" v-if="state.data.score>0">
						<template v-for="n in state.data.score" :key="n">
							<image class="img ss-m-r-8" src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/qt/202405281333225452.png"></image>
						</template>
						
						<template v-if="state.data.num>0">
							<image v-for="m in state.data.num" :key="m" class="img ss-m-r-8" src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/qt/202405281334123510.png"></image>
						</template>
						<view class="recommend ss-m-l-8">{{state.data.score}}</view>
					</view>
					<view class="rate ss-flex ss-row-left ss-m-b-16 ss-m-l-16" v-else>
						暂无评分
					</view>
					<view class="category ss-m-r-16 ss-m-b-16 ss-m-l-16">{{state.name}}</view>
				</view>
				<view class="devision"></view>
				<view class="time_mobile ss-flex ss-row-between ss-m-t-16 ss-p-12">
					<view class="time ss-flex-row ss-col-top ss-row-center">
						<view class="status" :class="{ing:state.data.is_business===true,end:state.data.is_business===false}">{{calcStatus}}</view>
						<view class="week ss-m-l-16">
							<view>{{calcStart}}</view>
							<view class="ss-m-t-10">{{calcEnd}}</view>
						</view>
					</view>
					<view class="icons ss-flex ss-row-between ss-m-r-16">
						<image class="img ss-m-r-40" src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/qt/202405281344274624.png" @click="iconClick(1)"></image>
						<image class="img " src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/qt/202405281344278609.png" @click="iconClick(2)"></image>
					</view>
				</view>
				<view class="devision"></view>
				<view class="address_nav ss-flex ss-row-between ss-p-16">
					<view class="address">
						<view class="addr one-line">{{state.data.position}}</view>
						<view class="dis ss-m-t-10">距离您的当前位置 {{calcDis}}</view>
					</view>
					<image class="img ss-m-r-16" src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/qt/202405281411309643.png" @click="iconClick(3)"></image>
				</view>
			</view>
		</s-layout>	
				
</template>

<script setup>
	import assNavbar from '@/components/ass-navbar.vue'
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import merchantApi from '@/sheep/api/merchant'
	import {
		ref,
		computed,
		reactive,
		onBeforeMount
	} from 'vue';
	import sheep from '@/sheep';
	import _ from 'lodash'
	import tools from '@/sheep/helper/tools';
	// #ifdef APP
	import {
		showAuditModal
	} from '@/sheep/hooks/useAudit.js'
	// #endif
	
	const latitude = computed(()=>{
		console.log('latitude:',sheep.$store('wash').myPosition.latitude)
		return sheep.$store('wash').myPosition.latitude
	})
	
	const longitude = computed(()=>{
		console.log('latitude:',sheep.$store('wash').myPosition.longitude);
		return sheep.$store('wash').myPosition.longitude
	})
	
	const state = reactive({
		data:{},
		
		name:'',
		latitude:30.189728,
		longitude:120.21219,
	})
	
	
	const calcDis = computed(()=>{
		
		return state.data && state.data.distance && state.data.distance.format_distance ?state.data.distance.format_distance:'';
		
	})
	
	const calcStatus = computed(()=>{
		return state.data.is_business==true?'营业中':'打烊中';
	})
	
	const calcStart = computed(()=>{
		return state.data && state.data.business_hours_text && state.data.business_hours_text[0] ? state.data.business_hours_text[0]:'';
	})
	
	const calcEnd =computed(()=>{
		return state.data && state.data.business_hours_text && state.data.business_hours_text[1] ? state.data.business_hours_text[1]:'';
	})
	
	const iconClick=(type)=>{
		
		if(type==1){
			return sheep.$router.go('/im/H5/to',{to:'service'},{redirect: true})
		}else if(type===2){
			// #ifdef APP
			showAuditModal('CALL_PHONE',()=>{
				tools.callPhone(state.data.mobile)
			},()=>{},false)
			// #endif
			// #ifdef MP || H5
			tools.callPhone(state.data.mobile)
			// #endif
			
		}else if(type==3){
			 uni.openLocation({
			        latitude: parseFloat(state.data.lat), 
			        longitude: parseFloat(state.data.lng), 
					 address: state.data.position,
			        success() {
			          console.log('地图打开成功');
			        },
			        fail(error) {
			          console.log('地图打开失败', error);
			        }
			    });
		}
		
		
	}
		
	const getDetail = async(id)=>{
		
		const {data,error}  = await merchantApi.detail(id,{lng:longitude.value,lat:latitude.value});
		
		const images = _.map(_.split(data.images,','), (value, index) => {
		    return { type: 'image', src: value };
		});
		
		data.images = images;
		data.score = Math.floor(data.score);
		data.num = 5-Math.floor(data.score);
		
		if(error===0){
			state.data = data;
		}
	}
	
	onLoad((option)=>{
		if(option && option.id){
			getDetail(option.id);
			state.name = option.name 
		}
	})
	
	
</script>

<style lang="scss">
.main{
	margin-top:-20rpx;
	background-color:#FFFFFF;
	height:430rpx;
	width:100%;
	position:relative;
	
	
	.title{
		font-family: PingFang SC;
		font-size: 36rpx;
		font-weight: 400;
		color: #3D3D3D;
		letter-spacing: 1rpx;
		margin-top:16rpx;
		line-height:40rpx;
		padding:10rpx;
		height:100rpx;
		margin-bottom:10rpx;
		
		
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		-webkit-line-clamp: 2; /* 指定显示的行数 */
		
		
	}
	.rate_category{
		font-family: PingFang SC;
		height:60rpx;
		.rate{
			.img{
				width:40rpx;
				height:40rpx;
			}
			.recommend{
				font-size: 24rpx;
				font-weight: 400;
				line-height: 24rpx;
				color:#FF6F6F;
			}
		}
		.category{
			
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 1rpx;
			line-height:40rpx;
			color: #767676;
		}
	}
	.time_mobile{
		height:80rpx;
		.time{
			font-family: PingFang SC;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 28rpx;
			letter-spacing: 1rpx;
		}
		.icons{
			.img{
				width:60rpx;
				height:80rpx;
			}
		}
	}
	.address_nav{
		height:100rpx;
		.address{
			font-family: PingFang SC;
			letter-spacing: 1rpx;
			.addr{
				font-size: 24rpx;
				font-weight: 700;
				line-height: 36rpx;
				
			}
			.dis{
				
				font-size: 24rpx;
				font-weight: 400;
				line-height: 36rpx;
				
			}
		}
		
		.img{
			width:60rpx;
			height:80rpx;
		}
	}
}

.one-line{
	width: 500rpx; /* 设置容器宽度 */
	white-space: nowrap; /* 防止文本换行 */
	overflow: hidden; /* 隐藏溢出部分 */
	text-overflow: ellipsis; /* 显示省略号 */
}
.devision{
	background-color:#F1F1F1;
	width:100%;
	height:1rpx;
}
.ing{
	color:#53B173;
}
.end{
	color:red;
}

</style>
